<template>
    <div class="tab-bar">
        <div class="tab-bar-item">
            <img src="../assets/home.png" alt="home" @click="changeTo('/')">
        </div>
        <div class="tab-bar-item">
            <img src="../assets/daily.png" alt="daily" @click="changeTo('daily')">
        </div>
        <div class="tab-bar-item">
            <img src="../assets/personal.png" alt="personal" @click="changeTo('personal')">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Tabbar',
    data() {
        return {

        }
    },
    computed: {
        userId () {
            return this.$store.state.userId
        }
    },
    methods: {
        changeTo: function (target) {
            if(target !== this.$route.path) {
                if(target === 'personal' && !this.userId) {
                    this.$router.push('login')
                }else {
                    this.$router.push(target)
                }
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab-bar{
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  height: 64px;
  padding: 0 12px;
  z-index: 99;
  background-color: #fff;
  box-shadow:0 1px 3px 0px;
  align-items:center;
}
.tab-bar-item {
    flex:1;
    text-align: center;
}
.tab-bar-item img{
    height:50px;
}
</style>
